﻿@page "/DropDown-List/Inline"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>The DropDownList appearing in line with highlighted content. Click that DropDownList value content and select an item from the popup list.</p>
</SampleDescription>
<ActionDescription>
   <p>The DropDownList component can be rendered in line with other content and you can override the styles of the dropdownlist component.</p>
   <p>This sample illustrates using the user's data that has been used and customized DropDownList border.</p>
</ActionDescription>

<div class="col-lg-12 control-section dropdown-height">
    <div class="control-wrapper">
        <div class="padding-top">
            <span id="contentText" class="dropdown-size">
                React top expert of this week is
                <SfDropDownList TValue="string" TItem="Data" CssClass="inlinecss" Placeholder="Select an employee" DataSource="@InlineEmployees" Value="@TextValue" Width="60px" PopupHeight="200px" PopupWidth="140px">
                    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
                </SfDropDownList>
            </span>
        </div>
    </div>
</div>

@code{
    public string TextValue { get; set; } = "Michael";

    public class Data
    {
        public string Name { get; set; }
        public string Eimg { get; set; }
    }

    List<Data> InlineEmployees = new List<Data>
{
        new Data() { Name = "Andrew", Eimg = "7" },
        new Data() { Name = "Anne", Eimg = "1" },
        new Data() { Name = "Janet", Eimg = "3" },
        new Data() { Name = "Laura", Eimg = "2" },
        new Data() { Name = "Michael", Eimg = "9" },
        new Data() { Name = "Nancy", Eimg = "4" },
        new Data() { Name = "Robert", Eimg = "8" },
        new Data() { Name = "Steven", Eimg = "10" },
    };
}

<style>
    .control-wrapper {
        margin: 0 auto;
        width: 325px;
    }

    .inlinecss.e-ddl .e-input-group-icon.e-ddl-icon {
        display: none;
    }

    .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
        font-size: 17px;
        font-weight: 500;
        margin: -7px 0px 0px 0px;
        padding: 0px;
    }

    .material .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
        margin: 4px 0px 0px 0px;
    }

    .bootstrap .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
        margin: -4px 0 0 0;
    }

    #contentText .e-input-group.e-control-wrapper.e-ddl::before,
    #contentText .e-input-group.e-control-wrapper.e-ddl::after {
        content: none;
    }

    #contentText .e-input-group.e-control-wrapper.e-ddl,
    #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
    #contentText .e-input-group.e-ddl.e-input-focus,
    #contentText .e-input-group.e-ddl.e-input-focus::before,
    #contentText .e-input-group.e-ddl.e-input-focus::after {
        border-width: 0px;
        border: none;
        border-bottom: 1px dashed black;
        box-shadow: none;
    }

    .highcontrast #contentText .e-input-group.e-control-wrapper.e-ddl,
    .highcontrast #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
    .highcontrast #contentText .e-input-group.e-ddl.e-input-focus,
    .highcontrast #contentText .e-input-group.e-ddl.e-input-focus::before,
    .highcontrast #contentText .e-input-group.e-ddl.e-input-focus::after {
        border-bottom: 1px dashed Yellow;
    }

    .dropdown-height {
        height: 400px;
    }

    .padding-top {
        padding-top: 75px;
    }

    .dropdown-size {
        font-size: 14px;
    }
</style>
